import React, { useEffect, useState } from 'react';
import './My_list.css'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
import { Input, Radio, Popup, Space } from 'antd-mobile'

function Jian_da_Jx() {
    const navigate = useNavigate()
    const [list, setList] = useState([
        { id: 1, name: '黄梅戏', status: false },
        { id: 2, name: '豫剧', status: false },
        { id: 3, name: '微剧', status: false },
        { id: 4, name: '昆曲', status: false },

    ])
    console.log(list);
    return (
        <div className="Jian_da_Jx">
            <div className="dingdan_detail_top">
                <div className="dingdan_detail_left">
                    <p style={{
                        fontSize: '18px',
                        color: '#333',
                        fontWeight: 'bold'
                    }}>9:41</p>
                </div>
                <div className="dingdan_detail_right">
                    <h3 className='dingdan_detail_right_h3'>
                        <svg t="1739181732005" class="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4224" width="20" height="20"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="4225" fill="#2c2c2c"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="4226" fill="#2c2c2c"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="4227" fill="#2c2c2c"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="4228" fill="#2c2c2c"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="4229" fill="#2c2c2c"></path></svg>
                    </h3>
                    <h3 className='dingdan_detail_right_h31'>
                        <svg t="1739181875778" class="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8311" width="20" height="20"><path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z" p-id="8312" fill="#2c2c2c"></path></svg>
                    </h3>
                    <h3 className='dingdan_detail_right_h32'>
                        <svg t="1739182052804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="20" height="20"><path d="M984.2 434.8c-5-2.9-8.2-8.2-8.2-13.9v-99.3c0-53.6-43.9-97.5-97.5-97.5h-781C43.9 224 0 267.9 0 321.5v380.9C0 756.1 43.9 800 97.5 800h780.9c53.6 0 97.5-43.9 97.5-97.5v-99.3c0-5.8 3.2-11 8.2-13.9 23.8-13.9 39.8-39.7 39.8-69.2v-16c0.1-29.6-15.9-55.5-39.7-69.3zM912 702.5c0 12-6.2 19.9-9.9 23.6-3.7 3.7-11.7 9.9-23.6 9.9h-781c-11.9 0-19.9-6.2-23.6-9.9-3.7-3.7-9.9-11.7-9.9-23.6v-381c0-11.9 6.2-19.9 9.9-23.6 3.7-3.7 11.7-9.9 23.6-9.9h780.9c11.9 0 19.9 6.2 23.6 9.9 3.7 3.7 9.9 11.7 9.9 23.6v381z" p-id="9430" fill="#2c2c2c"></path><path d="M736 344v336c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V344c0-8.8 7.2-16 16-16h608c8.8 0 16 7.2 16 16z" p-id="9431" fill="#2c2c2c"></path></svg>
                    </h3>
                </div>
            </div>
            <div className="dingdan_detail_wodedingdan">
                <div className="dingdan_detail_wodedingdan_left" onClick={() => {
                    navigate('/fei_yi_ti_jiao')
                }}>
                    <svg t="1739774644466" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4188" width="25" height="25"><path d="M711.1 928.3c-13.2 0-26.3-5-36.4-15.2L297.8 532.9c-20.1-20.2-20.1-53.1 0-73.3L674.7 79.2c20.1-20.3 52.6-20.3 72.7 0 20.1 20.2 20.1 53.1 0 73.3L406.9 496.2l340.5 343.6c20.1 20.3 20.1 53.1 0 73.3-10 10.1-23.2 15.2-36.3 15.2z" fill="#351B1B" p-id="4189"></path></svg>
                </div>
                <div className="dingdan_detail_wodedingdan_center">
                    <h3 style={{
                        fontSize: '18px',


                    }}>答案解析</h3>
                </div>

            </div>

            <div className="jian_da_baozhehezi">
                <div className="Jian_da_Jx_daixuanti">
                    <p className="Jian_da_Jx_daixuanti_p">
                        单选题
                    </p>
                </div>
                <div className="Jian_da_Jx_timu">
                    <p>1，京剧的前身是 （） ?</p>
                </div>
                <div className="Jian_da_Jx_daan">
                    {
                        list.map((item, index) => {
                            return (
                                //有序列表从大写A开始
                                <li key={index} className="fei_yi_box_daan_li"
                                    style={{
                                        backgroundColor: index === 0 ? '#f24e61' : '#ffffff',
                                        color: index === 0 ? '#ffffff' : '#351B1B',

                                    }}

                                    type="A" >

                                    <span className="fei_yi_box_daan_span"
                                    // 默认第一个背景红色

                                    >{item.name}</span>
                                </li>
                            )

                        })
                    }
                </div>
                <div className="jian_da_baozhehezi_jiexi">
                    <div className="jian_da_baozhehezi_jiexi_top">
                        <p>
                            【答案】
                        </p>
                    </div>
                    <div className="jian_da_baozhehezi_jiexi_center">
                        <p>
                            <span>我的答案：</span>
                            <span style={{
                                fontWeight: 'bold',
                                color: '#f24e61',
                            }}>A</span>
                        </p>
                        <p>
                            <span>正确答案:</span>
                            <span style={{
                                fontWeight: 'bold',
                                color: '#b49464',
                            }}>C</span>
                        </p>
                    </div>
                    <div className="jian_da_baozhehezi_jiexi_bottom">
                        <p>
                            【解析】
                        </p>
                        <p>
                        京剧的前身是清除流行语江南地区的徽班。清代乾隆五十五年起，原在南方演出的三庆、四喜、春台、和春，四大徽班陆续进入北京，他们语来自湖北的汉调艺人合作，同时又接受了昆曲、秦腔的部分剧目、曲调和表演方法，吸收了一些地方民间曲调，通过不断的交流、融合，最终形成京剧
                        </p>
                    </div>
                </div>
                <div className="Jian_da_Jx_daixuanti"  style={{
                    marginTop: '30px',
                   
                }}>
                    <p className="Jian_da_Jx_daixuanti_p">
                        单选题
                    </p>
                </div>
                <div className="Jian_da_Jx_timu">
                    <p style={{
                        marginLeft:'25px'
                    }}> 5、我国首个入选世界非遗的节日是（）？</p>
                </div >
                <div className="Jian_da_Jx_daan">
                    {
                        list.map((item, index) => {
                            return (
                                //有序列表从大写A开始
                                <li key={index} className="fei_yi_box_daan_li"
                                    style={{
                                        backgroundColor: index === 1 ? '#cea86f' : '#ffffff',
                                        color: index === 1 ? '#ffffff' : '#351B1B',

                                    }}

                                    type="A" >

                                    <span className="fei_yi_box_daan_span"
                                    // 默认第一个背景红色

                                    >{item.name}</span>
                                </li>
                            )

                        })
                    }
                </div>
                <div className="jian_da_baozhehezi_jiexi">
                    <div className="jian_da_baozhehezi_jiexi_top">
                        <p>
                            【答案】
                        </p>
                    </div>
                    <div className="jian_da_baozhehezi_jiexi_center">
                        <p>
                            <span>我的答案：</span>
                            <span style={{
                                fontWeight: 'bold',
                                color: '#b49464',
                            }}>B</span>
                        </p>
                        <p>
                            <span>正确答案:</span>
                            <span style={{
                                fontWeight: 'bold',
                                color: '#b49464',
                            }}>B</span>
                        </p>
                    </div>
                    <div className="jian_da_baozhehezi_jiexi_bottom">
                        <p style={{
                            fontSize:'15px'
                        }}>
                            【解析】
                        </p>
                        <p style={{
                            fontSize:'15px',
                            marginTop: '10px',
                        }}>
                        2009年9月，联合国科教文组织正式批准中国端午节列入世界非物质文化遗产，成为中国首个列入世界非遗的节日
                        </p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Jian_da_Jx